<!--关闭警情提醒历史 -->
<template>
    <div class="page historyReminder-page" data-page="historyReminder" >
        <div class="link-page-nav">
            <a href="#" class="link"  @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-search" style="padding-bottom: 17px;">
            <div class="historyReminder_title" style="float: left">历史记录</div>
            <a href="#" class="link popover-open" data-popover="#historyReminder_menu" style="color: #000;">
                <i class="iconfont icon-APPicon_shaixuan1" id="history_org"  style="font-size: 23px;"></i>
            </a>
        </div>
        <!-- 待指派 -->
        <div  class="historyReminder-tab-con tab page-content infinite-scroll-content" id="check-content" style="padding-bottom: 100px;"
            data-infinite-distance="80"  
            >
            <div class="list media-list">
                <ul id="historyReminderList" class="historyReminder-list" ></ul>
            </div>
            <!-- <div class="preloader infinite-scroll-preloader" id="trouble_preloader"></div> -->
        </div>

        <div class="popover select-option-con" id="historyReminder_menu">
          <div class="popover-angle"></div>
          <div class="popover-inner">
            <div class="list">
              <ul>
                <li><a href="" class="list-button item-link popover-close" id="historyReminder_org">选择单位</a></li>
                <li><a href="" class="list-button item-link popover-close removeScreen select-active" @click="removeScreen" >清&nbsp&nbsp&nbsp&nbsp&nbsp空</a></li>
              </ul>
            </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .historyReminder_title {
        padding-right: 20px;
        font-size: 24px;
        font-weight: bold;
        color: #000;
        background-color: #fff;
    }
    .historyReminder-list li{
        background: #ffffff;
        border: 1px solid rgba(225, 225, 225, 0.9);
        box-shadow: 0px 1px 10px 0px rgba(181, 200, 206, 0.5);
        border-radius: 6px;
        margin: 0 20px;
        margin-bottom: 20px;
    }
    .yh-list .eqType{
        color: #999999;
        font-size: 18px;
    }
    .overtime-icon{
        color: yellow;
        font-size: 15px;
        padding: 1px 5px;
        border-radius: 2px;
    }
    .tb-content p{
        margin-top: 10px;
        font-size: 13px;
        color: #999999;
    }
    .button{
        display: inline-block;
        width: 100px;
    }
    .reminder_cause{
        display: inline-block;
        width: 69%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tb-content span{
        margin-top: -21px;
        width: 80%;
        display: block;
        margin-left: 60px;
    }
    .list ul:before{
        height: 0px !important;
    }
    .list ul:after{
        height: 0px !important;
    }
    .show_details{
        display: none;
    }
</style>
<script>
return {
    mounted() {
        this.getTableList()
    },
    beforeCreate() {
        var self = this;
        var $ = self.$;
    },
    data: function() {
        return {
            selectOptionOrg : "",
            flagCause:false,
        }
    },
    methods: {
        getTableList(orgIds){
            Dao.getPoliceCloseRecords({
                queryType:0,
                pageIndex:0,
                pageSize:10,
                type:1,
                startTime:'',
                endTime:'',
                createAccount:'',
                orgIds:orgIds || userInfor.organizationIds
            }, function (res) {
                $("#historyReminderList").empty();
                let isMoreUnit = false
                if (!res || res.length < 1) {
                    $("#study_preloader").hide();
                    $("#historyReminderList").empty();
                    $("#historyReminderList").append(`<div class="no-data-img"><img src="` + listNoDataPic() + `"/></div>`);
                    return;
                }
                for(var i = 0;i<res.length;i++){
                    res[i].beginTime =res[i].beginTime.substring(0,16) + ' 至 ' + res[i].endTime.substring(0,16)
                }
                for (var i = 0; i < res.length; i++) {
                    let systemNameFlag = 'none'
                    if(res[i].systemName!=''){
                        systemNameFlag = true
                    }
                    $("#historyReminderList").append(`
                        <li id="li_goRectification_`+ res[i].id+`">
                            <div style="padding: 15px;"> 
                                <div class="yh-list">
                                    <span class="eqType">已结束</span>
                                    <div class="tb-title" style="font-weight:bold;margin-bottom: 5px;">`+'已结束的关闭报警措施'+`</div>
                                    <div class="tb-content"><p style="width:80px;display: inline-block;font-size:14px">`+'联网单位 '+`</p><span style="font-size:14px">`+res[i].orgName+`</span></div>
                                    <div class="tb-content"><p style="width:80px;display: inline-block;font-size:14px">`+'建筑物 '+`</p><span style="font-size:14px">`+res[i].fbsName+`</span></div>
                                    <div class="tb-content" style="display:`+systemNameFlag+`"><p style="width:80px;display: inline-block;font-size:14px;">`+'消防系统 '+`</p><span style="font-size:14px">`+res[i].systemName+`</span></div>
                                    <div class="tb-content"><p style="width:80px;display: inline-block;font-size:14px">`+'时间段 '+`</p><span style="font-size:14px">`+res[i].beginTime+`</span></div>
                                    <div class="tb-content"><p style="width:80px;display: inline-block;font-size:14px">`+'用户角色 '+`</p><span style="font-size:14px">`+res[i].roleNames+`</span></div>
                                    <div class="tb-content"><p style="width:80px;display: inline-block;font-size:14px">`+'事由 '+`</p><span class="reminder_cause" id="reminder_cause_`+ res[i].id+`" style="font-size:14px">`+res[i].remark+`</span></div>
                                    <div class="tb-content show_details" id="show_createName_`+ res[i].id+`"><p style="width:80px;display: inline-block;font-size:14px">`+'创建人 '+`</p><span class="reminder_cause" style="font-size:14px">`+res[i].createName+`</span></div>
                                    <div class="tb-content show_details" id="show_createTime_`+ res[i].id+`"><p style="width:80px;display: inline-block;font-size:14px">`+'创建时间 '+`</p><span class="reminder_cause" style="font-size:14px">`+res[i].createTime.substring(0,16)+`</span></div>
                                </div>
                            </div>
                            <div style="margin-bottom:15px;text-align:right">
                                <button id="getDetails_`+ res[i].id+`" class="col button button-round getDetails" style="color:black;background-color: #F2F2F2;margin-right:15px">详情</button>
                            </div>
                        </li>`
                    );
                    jQuery("#getDetails_"+ res[i].id).off().on("click",{'res':res[i]},function(e) {
                        
                        var self = this;
                        self.flagCause = !self.flagCause
                        jQuery(this).hide()
                        //if(self.flagCause){
                            jQuery("#reminder_cause_"+ e.data.res.id).removeClass('reminder_cause')
                            jQuery("#show_createName_"+ e.data.res.id).removeClass('show_details')
                            jQuery("#show_createTime_"+ e.data.res.id).removeClass('show_details')
                        // }else{
                        //     jQuery("#reminder_cause_"+ e.data.res.id).addClass('reminder_cause')
                        //     jQuery("#show_createName_"+ e.data.res.id).addClass('show_details')
                        //     jQuery("#show_createTime_"+ e.data.res.id).addClass('show_details')
                        // }
                    });
                }
            })
        },
        removeScreen: function () {
            var self = this;
            if (userInfor.isMuilUnitUser == 1) { //多
                self.selectOptionOrg = "";
                self.orgId = userInfor.organizationIds;
                jQuery("#historyReminder_org").html("选择单位");
                jQuery("#historyReminder_org").removeClass('select-active');
                jQuery("#history_org").removeClass("select-active");
            }
            self.getTableList();
        },
    },
    on: {
        pageInit: function(e, page) {
            var self = this;
            var $ = self.$;
            jQuery("#historyReminder_org").click(function(e) {
                loadSelectUnitFunc(function(data){
                    //选中
                    if(self.selectOptionOrg != data.orgId){
                        self.selectOptionOrg = data.orgId;
                        self.orgIds=data.orgId;
                        self.getTableList(self.orgIds);
                        jQuery("#historyReminder_org").html(data.orgName);
                        jQuery("#historyReminder_org").addClass('select-active');
                        jQuery("#history_org").addClass('select-active');
                    } else {
                        self.selectOptionOrg = "";
                        if (single_Orgid == "") {
                          self.orgIds=userInfor.organizationIds;
                        } else {
                          self.orgIds=single_Orgid;
                        }
                        jQuery("#historyReminder_org").html("选择单位");
                        jQuery("#historyReminder_org").removeClass('select-active');
                        jQuery("#history_org").removeClass("select-active");
                    }
                },self.selectOptionOrg);
            });
        },
        // pageAfterIn: function(e, page) {
        //    var self = this;
        //    var $ = self.$;
        //    indexHiddenDangerStatus=0;
        //    hiddenDangerListStatus=0;
        // },
        pageBeforeOut: function(e, page) {
            var self = this;
            
        },
        pageBeforeRemove: function(e, page) {
          
        }

    }
}
</script>